<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <link href="../../resources/css/map.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../../resources/lib/jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael-min.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.zoom.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.json.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.free_transform.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.inline_text_editing.js"></script>
    <script type="text/javascript" src="../../resources/lib/raphael/raphael.draw.js"></script>
    <link href="../../resources/lib/raphael/css/svgCanvas.css" rel="stylesheet" />
    <style type="text/css">
    </style>
</head>
<body>

<div id="desenho" style="">
    <div id="top_toolbar">
        <div style="float: left;">
            <div class="op icon_create" onclick="create()" title="新建"></div>
            <div class="op icon_save" onclick="save()" title="保存"></div>
        </div>
        <div id="penToolBar" style="float: left; margin-left: 10px;">
            <div name="select" class="op_sel icon_pointer" onclick="svgCanvas.changeTool('select')" title="选择"></div>
            <div name="text_edit" class="op icon_text_edit" onclick="svgCanvas.changeTool('text_edit')" title="修改文本"></div>
            <div name="text" class="op icon_text" onclick="svgCanvas.changeTool('text')" title="文本"></div>
            <div name="rect" class="op icon_rect" onclick="svgCanvas.changeTool('rect')" title="矩形"></div>
        </div>
        <div id="elementToolBar" style="float: left; margin-left: 10px; display: none">
            <div class="op icon_remove" onclick="removeSelected()" title="删除"></div>
            <div class="op icon_bring_backward" onclick="svgCanvas.selectedToBack()" title="移动到底部"></div>
            <div class="op icon_bring_forward" onclick="svgCanvas.selectedToFront()" title="移动到顶部"></div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div id="work_area">
        <div id="area_container" onselectstart="return false;">
            <div id="areaCanvas">
                <div id="canvas_container">
                </div>
            </div>
            <div class="map-zoomin" onclick="svgCanvas.setZoom(svgCanvas.getZoom() * 1.1);">+</div>
            <div class="map-zoomout" onclick="svgCanvas.setZoom(svgCanvas.getZoom() / 1.1)">−</div>
        </div>
    </div>
    <div id="bottom_toolbar">
        <div id="dica_dada"></div>
        <div id="cores_vez">
            <div id="zoom_tool" style="float: left;">
                <div style="float: left; line-height: 26px;" title="无颜色">
                    缩放
                </div>
                <div style="float: left;">
                    <select id="zoom-selector" onchange="svgCanvas.setZoom(this.value)" style="margin-top: 4px">
                        <option value="0.1">10%</option>
                        <option value="0.2">20%</option>
                        <option value="0.5">50%</option>
                        <option value="1" selected>100%</option>
                        <option value="1.5">150%</option>
                        <option value="2">200%</option>
                        <option value="3">300%</option>
                    </select>
                    <!--<input type="number" min="6" max="72" value="22" title="可见度" placeholder=""-->
                           <!--style="width: 40px; margin-left: 2px;" onchange="fontSizeChange(this.value)">-->
                </div>
                <div style="clear: both;"></div>
            </div>
            <div id="fill_tool" style="float: left; margin-left: 10px;">
                <div style="float: left; line-height: 26px;" title="无颜色">
                    填充
                </div>
                <div id="fill_none" class="op icon_no_color" onclick="fillChange('none')" style="float: left;"></div>
                <div class="op_sel" style="float: left;">
                    <input id="fill_picker" class="color_picker" type="color" title="填充" value="#000"
                           onchange="fillChange(this.value)">
                </div>
                <div style="float: left;">
                    <div>
                        <div class="cor" style="background-color: #000;" onclick="fillChange('#000000')"></div>
                        <div class="cor" style="background-color: #666;" onclick="fillChange('#666666')"></div>
                        <div class="cor" style="background-color: #8b0000;" onclick="fillChange('#8b0000')"></div>
                        <div class="cor" style="background-color: #008b00;" onclick="fillChange('#008b00')"></div>
                        <div class="cor" style="background-color: #00008b;" onclick="fillChange('#00008b')"></div>
                        <div class="cor" style="background-color: #008b8b;" onclick="fillChange('#008b8b')"></div>
                        <div class="cor" style="background-color: #8b8b00;" onclick="fillChange('#8b8b00')"></div>
                        <div class="cor" style="background-color: #8B4500;" onclick="fillChange('#8B4500')"></div>
                        <div class="cor" style="background-color: #8B0A50;" onclick="fillChange('#8B0A50')"></div>
                        <div class="cor" style="background-color: #551A8B;" onclick="fillChange('#551A8B')"></div>
                        <div class="cor" style="background-color: #548B54;" onclick="fillChange('#548B54')"></div>
                        <div class="cor" style="background-color: #8B6969;" onclick="fillChange('#8B6969')"></div>
                        <div class="cor" style="background-color: #8B7B8B;" onclick="fillChange('#8B7B8B')"></div>
                    </div>
                    <div style="clear: both;">
                        <div class="cor" style="margin-top: 2px; background-color: #ffffff;" onclick="fillChange('#FFFFFF')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #cccccc;" onclick="fillChange('#CCCCCC')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #ff0000;" onclick="fillChange('#ff0000')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #00ff00;" onclick="fillChange('#00ff00')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #0000ff;" onclick="fillChange('#0000ff')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #00ffff;" onclick="fillChange('#00ffff')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #ffff00;" onclick="fillChange('#ffff00')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #FF7F00;" onclick="fillChange('#FF7F00')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #FF1493;" onclick="fillChange('#FF1493')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #9B30FF;" onclick="fillChange('#9B30FF')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #9AFF9A;" onclick="fillChange('#9AFF9A')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #FFC1C1;" onclick="fillChange('#FFC1C1')"></div>
                        <div class="cor" style="margin-top: 2px; background-color: #FFE1FF;" onclick="fillChange('#FFE1FF')"></div>
                    </div>
                </div>
                <div style="float: left;">
                    <input type="number" min="0" max="1" step="0.1" value="1" title="可见度"
                           style="width: 40px; margin-left: 2px;" onchange="svgCanvas.attrChanged({'fill-opacity': this.value})">
                </div>
            </div>
            <div id="stroke_tool" style="float: left; margin-left: 10px;">
                <div style="float: left; line-height: 26px;" title="无颜色">
                    边线
                </div>
                <div id="stroke_none" class="op icon_no_color" onclick="strokeChange('none')" style="float: left;"></div>
                <div class="op_sel" style="float: left;">
                    <input id="stroke_picker" class="color_picker" type="color" title="边线颜色" onchange="strokeChange(this.value)">
                </div>
                <div id="stroke-width" style="float: left;">
                    <div id="op_larg10" class="op" onclick="strokeWidthChange(10)" title="Weight 10"></div>
                    <div id="op_larg8" class="op" onclick="strokeWidthChange(8)" title="Weight 8"></div>
                    <div id="op_larg6" class="op_sel" onclick="strokeWidthChange(6)" title="Weight 6"></div>
                    <div id="op_larg4" class="op" onclick="strokeWidthChange(4)" title="Weight 4"></div>
                    <div id="op_larg2" class="op" onclick="strokeWidthChange(2)" title="Weight 2"></div>
                </div>
            </div>
            <div id="font_tool" style="float: left; margin-left: 10px; display: none">
                <div style="float: left; line-height: 26px;" title="字体">
                    字体
                </div>
                <div style="float: left;">
                    <select id="font-family" onchange="fontFamilyChange(this.value)" style="margin: 0;">
                        <option value="Arial">Arial</option>
                        <option value="Serif">Serif</option>
                        <option value="fantasy">Fantasy</option>
                        <option value="宋体">宋体</option>
                        <option value="楷体">楷体</option>
                        <option value="黑体">黑体</option>
                        <option value="幼圆">幼圆</option>
                        <option value="微软雅黑">微软雅黑</option>
                    </select>
                    <input id="font-size" type="number" min="6" max="100" value="22" title="字号" placeholder=""
                           style="width: 40px; margin-left: 2px;" onchange="fontSizeChange(this.value)">
                </div>
                <div id="font-weight" class="op" onclick="textStyleChange(this, 'font-weight')" title="加粗"
                     style="font-weight: bold;line-height: 26px; font-size: 18px; margin-left: 2px;">B</div>
                <div id="font-style" class="op" onclick="textStyleChange(this, 'font-style')" title="斜体"
                     style="font-weight: bold;font-style: italic;line-height: 26px; font-size: 18px; margin-left: 2px;">I</div>
                <!--<div class="op" onclick="textStyleChange(this, 'text-decoration')" title="下划线"-->
                     <!--style="font-weight: bold;text-decoration: underline;line-height: 26px; font-size: 18px; margin-left: 2px;">U</div>-->
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

//    $('#canvas_container').height(400);
//$('#work_area').scroll(function() {
//    $('#ruler_x').scrollLeft(this.scrollLeft);
//    $('#ruler_y').scrollTop(this.scrollTop);
//});

    var svgCanvas = Raphael.svgCanvas("canvas_container", {
        width: 1200,
        height: 800
    });
//    $('#canvas_container').width(800);
    svgCanvas.toolChanged(function(type){
        $('#penToolBar div.op_sel').removeClass('op_sel').addClass('op');
        $('#penToolBar div[name='+type+']').removeClass('op').addClass('op_sel');
    });
    svgCanvas.elementCreated(function(element) {
        if (svgCanvas.isText(element)) {
        }
    });
    svgCanvas.selectChanged(function(element) {
        if (element == null) {
            $('#elementToolBar').hide();
        } else {
            $('#elementToolBar').show();

            var fill = element.attr('fill');
            if (fill == 'none') {
                $('#fill_none').removeClass("op").addClass("op_sel");
                $('#fill_picker').parent().removeClass("op_sel").addClass("op");
                $('#fill_picker').val(null);
            } else {
                $('#fill_none').removeClass("op_sel").addClass("op");
                $('#fill_picker').parent().removeClass("op").addClass("op_sel");
                $('#fill_picker').val(fill);
            }

            var stroke = element.attr('stroke');
            if (stroke == 'none') {
                $('#stroke_none').removeClass("op").addClass("op_sel");
                $('#stroke_picker').parent().removeClass("op_sel").addClass("op");
                $('#stroke_picker').val(null);
            } else {
                $('#stroke_none').removeClass("op_sel").addClass("op");
                $('#stroke_picker').parent().removeClass("op").addClass("op_sel");
                $('#stroke_picker').val(stroke);
            }

            var strokeWidth = element.attr('stroke-width');
            $('#stroke-width div[class=op_sel]').attr("class", "op");
            $('#op_larg'+strokeWidth).attr("class", "op_sel");
        }

        if (svgCanvas.isText(element)) {
            $('#font_tool').show();

            if (element.attr('font-weight') == 'bold') {
                $('#font-weight').removeClass('op').addClass('op_sel');
            } else {
                $('#font-weight').removeClass('op_sel').addClass('op');
            }
            if (element.attr('font-style') == 'italic') {
                $('#font-style').removeClass('op').addClass('op_sel');
            } else {
                $('#font-style').removeClass('op_sel').addClass('op');
            }

            $('#font-family').val(element.attr('font-family'));

            var fontSize = element.attr('font-size');
            fontSize = Number(fontSize.substring(0, fontSize.length - 2));
            if ($.isNumeric(fontSize)) {
                $('#font-size').val(fontSize);
            }
        } else {
            $('#font_tool').hide();
        }

    });

    var paper = svgCanvas.paper();

    function create() {
        paper.remove();
        svgCanvas = Raphael.svgCanvas("canvas_container", {
            width: 800,
            height: 400
        });
    }

    function save() {
        var json = svgCanvas.toJson();
        // 将json数据上传到服务器
        console.log(json);
    }

    function load(json) {
        svgCanvas.paper.fromJSON(json, function(el, data) {
            // Recreate the set using the identifier
            if ( !window[data.setName] ) window[data.setName] = paper.set();

            // Place each element back into the set
            window[data.setName].push(el);

            if ( data.ft && data.ft.attrs ) {
                paper.freeTransform(el);
                el.freeTransform.attrs = data.ft.attrs;
                el.freeTransform.apply();
            }

            return el;
        });
    }

    /**
     * 设置边线颜色
     * @param color
     */
    function fillChange(color) {
        $('#fill_picker').val(color);
        svgCanvas.attrChanged({'fill': color});
        if (color == 'none') {
            $('#fill_none').removeClass("op").addClass("op_sel");
            $('#fill_picker').parent().removeClass("op_sel").addClass("op");
            $('#fill_picker').val(null);
        } else {
            $('#fill_none').removeClass("op_sel").addClass("op");
            $('#fill_picker').parent().removeClass("op").addClass("op_sel");
        }
    }

    function strokeChange(color) {
        svgCanvas.attrChanged({'stroke': color});

        console.log($('#stroke_picker').parent().attr("class"));
        if (color == 'none') {
            $('#stroke_none').removeClass("op").addClass("op_sel");
            $('#stroke_picker').parent().removeClass("op_sel").addClass("op");
            $('#stroke_picker').val(null);
        } else {
            $('#stroke_none').removeClass("op_sel").addClass("op");
            $('#stroke_picker').parent().removeClass("op").addClass("op_sel");
        }
    }

    function strokeWidthChange(strokeWidth) {
        svgCanvas.attrChanged({'stroke-width': strokeWidth});
        $('#stroke_tool div[class=op_sel]').attr("class", "op");
        $('#op_larg'+strokeWidth).attr("class", "op_sel");
    }

    function textStyleChange(el, attrName) {
        var element = svgCanvas.getSelected();
        if (svgCanvas.isText(element)) {
            var attr = {};
            if ($(el).hasClass('op_sel')) {
                $(el).removeClass('op_sel').addClass('op');
                attr[attrName] = null;
            } else {
                $(el).removeClass('op').addClass('op_sel');
                attr[attrName] = $(el).css(attrName);
            }
            element.attr(attr);
        }
    }

    function toolChange(type) {
        svgCanvas.changeTool(type);
    }

    function removeSelected() {
        svgCanvas.removeSelected();
    }

    function fontSizeChange(fontSize) {
       svgCanvas.attrChanged({'font-size': fontSize+'px'});
    }

    function fontFamilyChange(fontFamily) {
        svgCanvas.attrChanged({'font-family': fontFamily});
    }

</script>
</body>
</html>